<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-04-28 16:42:59
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-07-24 15:52:05
 * @FilePath: \hl-registration-view\src\components\Common\RowItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-col :lg="props.span + 2" :xl="props.span" v-show="props.count < 5 || store.searchShow" style="margin: 7.5px 0;">
    <div class="row align-items">
      <div class="label-font-box" :style="widthCustomer" v-if="props.label != ''">
        {{ props.label }}
      </div>
      <slot></slot>
    </div>
  </el-col>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { PiniaStore } from '../../store'
interface PropsType {
  //   是否需要更多按钮
  label?: string
  span?: number
  count: number
}
const props = withDefaults(defineProps<PropsType>(), {
  label: '',
  span: 6,
  count: 1
})
const store = PiniaStore()
const widthCustomer = computed(() => {
  return 'width:' + 20 * props.label.length + 'px;'
})
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.label-font-box {
  padding: 0 5px;
  min-width: 40px;
  color: #333;
}
</style>
